<template>
    <view>
        <Tabs :tabs111="tabs" @tabsItemChange="handleTabsItemChange">
            <block v-if="tabs[0].isActive">
                <view class="order">
                    <view class="order_item">
                        <view class="orderNo">订单编号</view>
                        <view class="orderNumber">HD5551545454552545455545</view>
                    </view>
                    <view class="order_item">
                        <view class="orderNo">订单价格</view>
                        <view class="orderNumber">￥1999</view>
                    </view>
                    <view class="order_item day">
                        <view class="orderNo">订单日期</view>
                        <view class="orderNumber">20201229</view>
                    </view>
                </view>
            </block>
            <block v-else-if="tabs[1].isActive">待付款详情页</block>
            <block v-else-if="tabs[2].isActive">待发货详情页</block>
            <block v-else-if="tabs[2].isActive">退款/退货详情页</block>
        </Tabs>
    </view>
</template>

<script>
import Tabs from '../../components/Tabs/Tabs';
/**
 * 1.页面被打开的时候  onshow
 * 0. onshow不同于onLoad 无法在形参上接收options参数
 * 0.5.判断缓存中有没有token
 *   没有  直接跳转到授权页面
 *   有 直接往下进行
 * 1. 获取url上的参数type
 * 2. 根据type去发送请求获取订单数据   根据type来决定页面标题的数组元素  哪个被激活选中
 * 3.渲染页面
 * 2.点击不同的标题  重新发送请求来获取和渲染数据
 */
import { request } from '../../request/index.js';
import regeneratorRuntime from '../../lib/runtime/runtime'; // 支持es7的js文件引入1123

export default {
    components: {
        Tabs
    },
    data() {
        return {
            tabs: [
                {
                    id: 0,
                    value: '全部',
                    isActive: true
                },
                {
                    id: 1,
                    value: '待付款',
                    isActive: false
                },
                {
                    id: 2,
                    value: '待发货',
                    isActive: false
                },
                {
                    id: 3,
                    value: '退货/退款',
                    isActive: false
                }
            ]
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        const token = uni.getStorageSync('token'); // if(!token) {
        //   wx.navigateTo({
        //     url: '/pages/auth/index',
        //     success: (result)=>{
        //     },
        //     fail: ()=>{},
        //     complete: ()=>{}
        //   })
        //   return
        // }
        // 1.获取当前的小程序的页面栈--数组  长度最大是10
        // 2.数组中索引最大的页面就是当前页面

        let pages = getCurrentPages();
        console.log(pages);
        let currentPage = pages[pages.length - 1].$vm;
        console.log(currentPage); // 3.获取url上的type参数

        let { type } = currentPage.options; // 4.激活选中页面标题 当type=1 index=0

        this.changeTitleByIndex(type - 1); // console.log(type)

        this.getOrders(type);
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 根据标题索引来激活选中  标题数组
        changeTitleByIndex(index) {
            let tabs = JSON.parse(JSON.stringify(this.tabs));
            tabs.forEach((item, index_tabs) => {
                if (index_tabs === index) {
                    item.isActive = true;
                } else {
                    item.isActive = false;
                }
            }); // 重新赋值

            this.setData({
                tabs
            });
        },

        /**
         * 标题的点击事件 从子组件传递过来的
         */
        handleTabsItemChange(e) {
            console.log(e);
            const index = e.detail;
            console.log(index);
            this.changeTitleByIndex(index); // 重新发送请求  type=1  index=0

            this.getOrders(index + 1);
        },

        // 获取订单列表
        async getOrders(type) {
            const res = await request({
                url: '/my/orders/all',
                data: {
                    type
                }
            });
            console.log(res); // 拿不到token  GG...  到此结束....
        }
    }
};
</script>
<style>
@import './index.css';
</style>
